<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="tools/konva.min.js"></script>
</head>
<body>
    <div class="container" id="container"></div>
</body>
<script>
   window.onload =function(){
        // 创建舞台对象
    var stage = new Konva.Stage({
        container:'container',
        width:300,
        height:200
    });
    // 创建新图层
    var layer = new Konva.Layer();
    // 创建图形
    var circle = new Konva.Circle({
        x:stage.getWidth()/2,
        y:stage.getHeight()/2,
        radius: 50,
        fill: '#90a114',
        stroke: '#ff7f5f',
        strokeWidth: 4
    });
    circle.draggable('true');
    // 添加至DOM树
    layer.add(circle);
    stage.add(layer);
   }
    
</script>
</html>